<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="loginForm">
    <label>用户名</label><input type="text" placeholder="请输入用户名" name="uname" id="uname">

    <br/>

    <label>密码</label><input type="password" placeholder="请输入密码" name="pwd" id="pwd">

    <label>验证码</label><input type="text" name="verifyCode" id="verifyCode" placeholder="请输入验证码"/>
        <img id="showImgCode" title="看不清？点击换一张！" th:src="@{/verifyCode/gen}" style="cursor: pointer;" onclick="refreshImage();"/>

    <br/>
    <input type="checkbox" name="rmb">自动登录
    <input type="button" name="登录" onclick="submitForm()">

    <p style="color: red" id="security_msg"></p>
</form>

<div>
    <!-- 登出带 http://127.0.0.1:8080/myLoginPage?logout 的?logout 能进行回显判断param.logout-->
    <span th:if="${param.logout}">logout</span>
</div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    function refreshImage(){
        document.getElementById("showImgCode").setAttribute("src","/verifyCode/gen?timestamp="+(new Date().getTime()));
    }


    //提交
    function submitForm(){
        $("#security_msg").html("");
        var username = $("#uname").val();
        var password = $("#pwd").val();
        var imgCode = $("#verifyCode").val();
        if(username==""||username=="请输入账号"){
            $("#security_msg").html("请输入账号");
            return;
        }else if(password==""||password=="请输入密码"){
            $("#security_msg").html("请输入密码");
            return;
        }else if(imgCode==""||imgCode=="请输入验证码"){
            $("#security_msg").html("请输入验证码");
            return;
        }
        $.ajax({
            url : "/haha",
            type : 'POST',
            data : $("#loginForm").serialize(),
            success : function(data) {
                if (data.success) {
                    window.location.href = "/index";
                } else {
                    $("#security_msg").html(data.message);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $("#security_msg").html("登录异常,请联系管理人员");
            }
        });
    }
</script>
</html>